<template>
  <div class="myEditor">
    <div class="tinymce-editor-wrapper">
      <editor
	  style="line-height: 40px;"
        v-model="content"
        :disabled="disabled"
        :init="options"
        placeholder="请输入内容..."
      />
    </div>
  </div>
</template>
 
<script>
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver'
// import { uploadOss } from '@/services/notice.service.js'
// 引入编辑器插件plugins
import 'tinymce/plugins/advlist'
import 'tinymce/plugins/autolink'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/link'
import 'tinymce/plugins/image'
import 'tinymce/plugins/charmap'
import 'tinymce/plugins/print'
import 'tinymce/plugins/preview'
import 'tinymce/plugins/anchor'
import 'tinymce/plugins/searchreplace'
import 'tinymce/plugins/visualblocks'
import 'tinymce/plugins/fullscreen'
import 'tinymce/plugins/insertdatetime'
import 'tinymce/plugins/table'
import 'tinymce/icons/default'
// 自定义工具栏
const toolbar = 'undo redo | insert | styleselect | fontselect bold italic forecolor backcolor | alignleft aligncenter alignright |  outdent indent | link image'
const plugins = [
  'advlist autolink lists link image charmap print preview anchor',
  'searchreplace visualblocks fullscreen',
  'insertdatetime  table'
]
// 字体
const fonts = '等线;方正舒体;方正姚体;仿宋;黑体;华文彩云;华文仿宋;华文行楷;华文琥班;华文楷体;华文隶书;华文宋体;华文细黑;华文新號;华文中宋;楷体;隶书;宋体;微软雅黑;新宋体;幼圆;'
 
export default {
  components: {
    Editor
  },
  props: {
    value: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      content: this.value,
      options: {
		  inline: true,
        language_url: require('./tinymce/langs/zh_CN'), // 语言包
        language: 'zh_CN', // 语言
        skin_url: './tinymce/skins/ui/oxide', // 浅色
        plugins: plugins, // 插件
        toolbar: toolbar, // 工具栏
        font_formats: fonts, // 字体
        height: 100, // 编辑器高度
        branding: false, // 是否禁用“Powered by TinyMCE”
        menubar: true, // 顶部菜单栏显示 
        resVideo: '', 
        uploaded: false // 有没有上传完成
        // file_picker_types: 'media'
        // images_upload_handler: (blobInfo, success, failure) => {
        //   this.handleImageAdded(blobInfo, success, failure)
        // }
        // file_picker_callback: (callback, value, meta) => {
        //   this.open(callback, value, meta)
        // }
      }
    }
  },
  watch: {
    value(val) { // 父子组建双向绑定
      this.content = val
    },
    content(val) {
      this.$emit('input', val)
    }
  },
  mounted() {
    tinymce.init({})
  },
  created() {
  },
  methods: {
    // open(callback, value, meta) {
    //   if (meta.filetype === 'media') {
    //     let input = document.createElement('input')// 创建一个隐藏的input
    //     input.setAttribute('type', 'file')
    //     let that = this
    //     input.onchange = function() {
    //       let file = this.files[0] // 选取第一个文件
    //       that.uploadVideo(file, 'media') // 上传视频拿到url
    //       setTimeout(() => {
    //         if (that.options.uploaded) {
    //           callback(that.resVideo) // 将url显示在弹框输入框中
    //         } else {
    //           setTimeout(() => { // 设置几秒后再去取数据
    //             callback(this.resVideo)
    //           }, 5000)
    //         }
    //       }, 5000)
    //     }
        
    //     // 触发点击
    //     input.click()
    //   }
    // },
    // // 插入视频的方法
    // uploadVideo(file, type) {
    //   const formdate = new FormData()
    //   formdate.set('file', file)
    //   getNoticeApi(formdate).then(response => {
    //     if (response.code === 200) {
    //       if (type === 'media') {
    //         this.resVideo = response.url
    //         this.options.uploaded = true
    //       }
    //     }
    //   })
    // },
    // // 插入图片的方法
    // handleImageAdded(blobInfo, success, failure) {
    //   let file = blobInfo.blob()
    //   const isLt8M = file.size / 1024 / 1024 < 20
    //   if (!isLt8M) {
    //     this.$message.error('图片大小不能超过 20MB!')
    //     return
    //   }
    //   const formdate = new FormData()
    //   formdate.set('file', blobInfo.blob())
    //   getNoticeApi(formdate).then(response => {
    //     if (response.code === 200) {
    //       let url = response.url
    //       success(url)
    //     } else {
    //       failure(response.message)
    //       this.$message.error(response.message)
    //     }
    //   })
    // },
    // async info() { // 回显内容
    //   let { data } = await getDetail({
    //     templateId: this.mubanId
    //   })
    //   this.content = data
    // }
  }
}
</script>
<style lang="less">
.tox-silver-sink {
  // z-index: 13000 !important;
}
.tox .tox-editor-container{
	width: 510px !important;
}
.mce-content-body{
	border: 1px #111111 solid;
	p{
		margin-top: 0;
		 margin-bottom: 0;
		 text-align: left;
	}
}
</style>
<style scoped>
@import "./tinymce/skins/ui/oxide/skin.min.css";
@import "./tinymce/skins/ui/oxide/content.min.css";
@import "./tinymce/skins/ui/oxide/content.css";
</style>
